<template>
  <div class="prompt_big">
    <div class="prompt">
      <img
        src="https://img2.baidu.com/it/u=2250997377,313757253&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500"
      />
      <h1><span>欢迎使用</span><span>空气质量发布</span></h1>
    </div>
    <p>
      为了给您提供更优质的服务，空气质量发布将会使用您的个人信息，<span class="pro_span"
        >请在使用前查看并同意</span
      ><span class="pro_spans">《隐私政策》</span>与<span class="pro_spans">《服务协议》</span
      ><span class="pro_span">，若选择不同意，将无法使用我们的产品与服务。</span
      >您需要注册账号即可使用空气质量发布的基本信息服务功能
    </p>
    <p>
      我们将自行通过第三方收集您在使用本服务时的<span class="pro_span"
        >手机设备信息和个人行为信息</span
      >,进行必要的业务运营与评估，客户支持，以及为您提供个性化的信息展示服务。您可在《隐私政策》中全面了解个人信息收集，使用和共享等情况。
    </p>
    <div class="pro_location">
      <div class="pro_icon"><van-icon name="location-o" /></div>
      <div>
        <p class="pro_p">位置信息</p>
        <p class="pro_t">提供精准空气质量及天气信息</p>
      </div>
    </div>
    <van-button type="primary" @click="arrgry">同意协议并进入</van-button>
    <p class="pro_xy">不同意协议并退出</p>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router=useRouter();
const arrgry=()=>{
    console.log(111);
    router.replace("/login")
}
</script>

<style scoped lang="scss">
.prompt_big{
  width: 100vw;
  height: 100vh;
  padding: 2rem;
}
.prompt {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  img {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin-right: 10px;
  }
  h1 {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    span {
      font-weight: 800;
    }
  }
}
p {
  line-height: 20px;
  font-size: 12px;
  .pro_span {
    font-weight: 600;
  }
  .pro_spans {
    font-weight: 600;
    color: rgb(49, 203, 254);
  }
}
.pro_location {
  margin-top: 210px;
  border: 1px solid rgb(67, 152, 213);
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  .pro_icon{
    width: 30px;
    height: 30px;
    background: rgba($color: #0e6bff, $alpha: 0.1);
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0058e5;
  }
  .pro_p{
    font-weight: 600;
    font-size: 13px;
  }
  .pro_t{
    font-size: 12px;
    color: rgb(163, 161, 161);
  }
}
.van-button--normal {
    width: 100%;
    margin-bottom: 10px;
  }
  .pro_xy{
    text-align: center;
    color: rgb(163, 161, 161);
  }
</style>
